》旋轉、更新
旋轉:將物件以角度或弧度,進行旋轉。如 css 3 的 rotate(n deg)
更新:update 生命週期
》Javascript 內容
旋轉設定轉的方式有使用「角度」或「弧度」,正為順時針轉動,負為逆時針轉動。
scene.create = function() {
let bg = this.add.sprite(0, 0, 'bg')
bg.setOrigin(0, 0)
let player = this.add.sprite(30, 223, 'player')
// 旋轉角度的設定,使用「角度」,等同 player.angle = 45
player.setAngle(45)
// 旋轉角度的設定,使用「弧度」,等同 player.rotation = Math.PI / 4
player.setRotation(Math.PI / 4)
}
接著我們要使用到 Phaser 的生命週期 update,因為 player 是在 create 宣告的,我們在 update 生命週期是無法直接使用到,所以這邊我們改寫一下。
scene.create = function() {
.....
this.player = this.add.sprite(30, 223, 'player')
this.player.setAngle(45)
}
scene.update = function() {
this.player.angle += 0.5
}
》結論
今天提到的旋轉,可以用角度或者弧度來設定;生命週期 update,很常用到需要計算動畫位置以及操作。經由兩天下來,大家可以試著在 update 做些操作,像是放大的 scale,或者位置的移動 X,都可以嘗做看看!
今天就先到這裡,我們明天見。